<template>
  <div class="home">
    <!-- 头部组件 -->
    <div class="home-header">
      <i class="icon iconfont el-icon-search"></i>
      <h3>{{place}}</h3>
      <div class="right">
        <span>登入</span>&emsp;|&emsp;
        <span>注册</span>
      </div>
    </div>
    <!-- 食品分类 -->
    <div class="homeFood">
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="value in this.foodTitle" :key= value.title >
          <van-image height = 50 width= 40  :src= "'https://fuss10.elemecdn.com' + value.image_url"     />
          <span>{{value.title}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import "vant/lib/index.css";
export default {
  data() {
    return {
      place: null,
      foodTitle: [],
      imgUrl: "https://fuss10.elemecdn.com"
    };
  },
  mounted() {
    //请求头部的位置
    axios
      .get("http://kumanxuan1.f3322.net:8001/v2/pois/23.128225,113.289752", {
        //geohash: res.data.latitude + res.data.longitude
      })
      .then(res => {
        console.log(res.data);
        this.place = res.data.name;
      });
    //美食分类
    axios
      .get("http://kumanxuan1.f3322.net:8001/v2/index_entry", {})
      .then(res => {
        console.log(res.data);
        this.foodTitle = res.data;
      });
  }
};
</script>

<style lang="less" scoped>
.home {
  // 头部
  .home-header {
    // 头部样式
    height: 80px;
    background: #409eff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    i,
    h3,
    .right {
      color: #fff;
      text-align: center;
    }
    i {
      flex: 2;
      font-size: 45px;
      text-align: left;
    }
    h3 {
      flex: 6;
      font-size: 32px;
    }
    .right {
      flex: 2;
      font-size: 26px;
    }
  }
  //食品分类
  .homeFood {
    margin-top: 50px;
  }
}
</style>>
